<!--弹出我的菜单-->
<template>
    <div class="container">
        <section class="content">
            <div class="content_div">
                <ul>
                    <li>
                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M510.6 82.4c-117 0-211.8 98.5-211.8 219.9s94.8 219.9 211.8 219.9 211.8-98.5 211.8-219.9S627.5 82.4 510.6 82.4z"  /><path fill="#333333" d="M663.1 518.8C633.4 549 580.7 569 520.5 569c-62.2 0-116.4-21.4-145.4-53.2C163.1 599.3 179 876.6 179 876.6h667.3c-0.1 0.1 32.1-270.8-183.2-357.8z"  /></svg>
                        <p>请登陆</p>
                        <span></span>
                    </li>
                    <li>
                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M844.8 742.4l-57.6-115.2L787.2 448c0-115.2-76.8-224-185.6-262.4C595.2 147.2 556.8 115.2 512 115.2S428.8 147.2 422.4 192C313.6 230.4 236.8 332.8 236.8 448l0 179.2-57.6 115.2c-6.4 6.4-6.4 19.2 0 32 6.4 6.4 12.8 12.8 25.6 12.8l614.4 0c12.8 0 19.2-6.4 25.6-12.8C851.2 768 851.2 755.2 844.8 742.4zM422.4 819.2c0 51.2 38.4 89.6 89.6 89.6 51.2 0 89.6-38.4 89.6-89.6L422.4 819.2z" /></svg>
                        <p>我的消息</p>
                        <span></span>
                    </li>
                    <li>
                        <svg class="icon_3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512 0C228.693333 0 0 228.693333 0 512s228.693333 512 512 512 512-228.693333 512-512S795.306667 0 512 0z m20.48 843.093333c-175.786667 0-317.44-141.653333-317.44-317.44 0-139.946667 90.453333-257.706667 215.04-300.373333-20.48 40.96-30.72 87.04-30.72 136.533333 0 175.786667 141.653333 317.44 317.44 317.44 35.84 0 69.973333-5.12 102.4-17.066666-51.2 107.52-160.426667 180.906667-286.72 180.906666z"  /></svg>
                        <p>夜间模式</p>
                        <span></span>
                    </li>
                    <li>
                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M826.592 418.566h-12.314c-6.188-19.654-14.316-38.432-24.05-56.21l9.753-9.754c34.937-34.944 34.937-91.572 0-126.522l-2.656-2.637c-34.957-34.95-91.565-34.95-126.503 0l-10.892 10.893c-17.914-9.395-36.813-17.184-56.557-23.02v-15.7c0-49.408-40.058-89.46-89.453-89.46h-3.763c-49.402 0-89.466 40.052-89.466 89.46v16.82c-18.893 5.855-36.998 13.471-54.176 22.61l-11.603-11.596c-34.9-34.95-91.552-34.95-126.496 0l-2.669 2.636c-34.899 34.944-34.899 91.572 0 126.522l11.22 11.22c-9.364 17.343-17.197 35.634-23.207 54.745h-16.275c-49.402 0-89.46 40.051-89.46 89.459v3.75c0 49.408 40.052 89.466 89.46 89.466h14.253c5.875 20.205 13.804 39.526 23.398 57.837L224.314 669.9c-34.95 34.95-34.95 91.597 0 126.547l2.617 2.669c34.938 34.937 91.597 34.937 126.535 0l9.708-9.715c18.176 9.952 37.39 18.24 57.517 24.473v13.197c0 49.402 40.058 89.453 89.466 89.453h3.763c49.395 0 89.453-40.051 89.453-89.453v-12.077c20.992-6.208 41.005-14.643 59.917-24.851l8.966 8.966c34.893 34.938 91.597 34.938 126.496 0l2.675-2.668c34.938-34.95 34.938-91.597 0-126.548l-9.357-9.356c9.959-18.74 18.17-38.548 24.212-59.303h10.297c49.395 0 89.46-40.057 89.46-89.465v-3.75c0.012-49.402-40.052-89.454-89.447-89.454zM514.195 652.998c-77.363 0-140.051-62.688-140.051-139.993 0-77.37 62.682-140.045 140.051-140.045 77.312 0 139.987 62.675 139.987 140.045 0 77.305-62.675 139.993-139.987 139.993z" /></svg>
                        <p>设置</p>
                        <span></span>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {

            }
        }
    }
</script>
<style lang="scss" scoped>

    @import "../../../assets/styles/mixin.scss";

    .container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    .content{
        position: absolute;
        top: 2rem;
        right: 0rem;
        width: 8rem;
        background-color: rgba(255,255,255,1);
        border: 1px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        border: 1px;
        border-radius: 0.25rem;
    }
    .content_div{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    li{
        line-height: 1.6rem;
        border-bottom:.025rem solid #F7F7F7;
        display: flex;
        flex-direction:row;
        justify-content: flex-start;
        align-items: center;
    }

    p{
        font-size: 0.55rem;
        padding-left: 1rem;
        padding-right: 0.1rem;
    }

    span{
        width: 1.7rem;
    }

    .icon{
        width: 1rem;
        height:1rem;
    }
    .icon_3{
        width: .85rem;
        height:.85rem;
        padding-left: 0.15rem;
    }






</style>